
  <template>
  <div class="bf-commont-template">
    <!--出勤汇总表-->

    <div class="clearfix bf-top-button">
       <div class="float-l">
        <el-button @click="buildMonthCount" type="primary">生成汇总表</el-button>
        <el-button @click="exportExcle" type="primary">导出</el-button>
        <!-- <el-button @click="reback" type="primary">返回</el-button> -->
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table
      :data="userData"
      :setting="listDetailSetting"
      @editSubmit="editSubmit"
      @pageChange = "pageChange"
      :editRules = "editRules"
      ref="table"
    ></bf-table>
  </div>
</template>

<script>
import { listDetailSetting } from './table.setting.js'
import { getList } from './api.js'
export default {
  data() {
    return {
      searchData: '',
      userData: {
      },
      listDetailSetting: listDetailSetting,
      editRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ],
        roleName: [
          { required: true, message: '请输入用户角色', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    searchList() {
      getList().then((response) => {
        this.userData = response
        // console.log(this.userData.list)
      })
    },
    editSubmit(params, formType, formList) {
      // console.log(params, formType, formList)
    },
    pageChange(pageObj) {
      // console.log(pageObj)
    },
    showSearch() {
      this.$refs.table.showSearch()
    },

    quickSearch() {
      // const params = {
      //   userId: this.searchData
      // }
      // console.log(params)
    },
    exportExcle(){ // 导出
      this.$message({
        message: '导出功能正在开发中，敬请期待',
        type: 'warning'
      })
    },
    buildMonthCount(){ // 生成月报表
      this.$message({
        message: ' 生成汇总表正在开发中，敬请期待',
        type: 'warning'
      })
    }
  },

}
</script>

<style scoped>

</style>
